<template>
	<view class="template-edit tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<!-- 	<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back'>
				<text class='icon tn-icon-close' @click="goBack"></text>
			</view>

		</tn-nav-bar> -->
		<tn-nav-bar fixed alpha :isBack="true">
			房间申请
		</tn-nav-bar>

		<view class="tn-safe-area-inset-bottom " :style="{paddingTop: vuex_custom_bar_height + 'px'}">







			<!-- <view class="tn-flex tn-flex-wrap tn-margin amount-input-box">
				<view class="amount-input-currency amount-input-currency-bg">
					<text class="currency-text">派对名称</text>
				</view>
				<input type="text" class="input-value" placeholder="给派对房间起个响亮的名称吧" :adjust-position="true"
					:auto-blur="true" v-model="title">
				<view class="amount-input-currencyyou amount-input-currency-bg" @click="suiji()">
					<text class="currency-text tn-icon-set">随机</text>
				</view>
			</view> -->
			<view class="name-input-box">
				<text class="name-input-box-left">
					房间名称
				</text>
				<input type="text" class="input-value" placeholder="取个响亮的名称吧" :adjust-position="true" :auto-blur="true"
					v-model="title">
				<view class="name-input-box-right" @click="suiji()">
					<image class="name-input-box-right-img" src="/static/nameInputIcon1.png" mode=""></image>
					<text class="currency-text">随机</text>
				</view>
			</view>


			<view class="textarea-boxs">
				<text class="name-input-box-left">房间公告：</text>
				<view class="textarea-content">
					<textarea style="width:518rpx;font-size:24rpx;" maxlength="300" placeholder="简单的写一下房间的公告吧（300字以内）"
						v-model="detail" placeholder-style="color:#D8D8D8;font-size:10px;" class=""></textarea>
				</view>
			</view>



			<view class=" tn-text-bold  clamp-text-1 tn-text-justify tn-margin " v-if="tagList.length>0">
				派对背景<text class="tn-color-red">*</text>
			</view>

			<view class="tn-flex tn-flex-wrap" style="margin-top: 20rpx;" v-if="tagList.length>0">
				<block v-for="(item, index) in tagList" :key="index">
					<view class="" @click="pickerColorClick(index)" style="    flex-basis:50%;">
						<view class=" tn-margin-xs tn-radius "
							:class="[{'tn-shadow-blurddd': currentColorIndex === index}]">


							<view class=""
								:class="[{'tn-image-upload__item-preview__delete': currentColorIndex === index}]">
								<view class="tn-image-upload__item-preview__delete--icon tn-icon-success">
								</view>
							</view>



							<image :src='item.bg_img' style="width:100%;" mode="aspectFill"></image>

						</view>

					</view>
				</block>
			</view>




		</view>
		<!-- <view class="tn-flex tn-flex-wrap tn-margin">
			<view class="dk-ban" v-for="(item, indexsd) in colorList" :key="indexsd"
				:class="[{'tn-shadow-blurddd': leixingcudin === indexsd}]" @click="pickerColorClickleid(indexsd)">
				<view class="dk-bantext">
					{{item.title}}
				</view>
			</view>

		</view> -->
		<view class="list-box">
			<view @click="pickerColorClickleid(indexsd)" class="list-item" v-for="(item, indexsd) in colorList"
				:key="indexsd" :class="[{'list-item-0': leixingcudin === indexsd && indexsd===0},
			{'list-item-1': leixingcudin === indexsd && indexsd===1},
			{'list-item-2': leixingcudin === indexsd && indexsd===2}
			]">
				<view class="item-name"><p>{{item.title}}</p></view>
				<image class="item-img" src="/static/nameInputIcon2.png" mode="" v-if="indexsd===0"></image>
				<image class="item-img" src="/static/nameInputIcon3.png" mode="" v-if="indexsd===1"></image>
				<image class="item-img" src="/static/nameInputIcon4.png" mode="" v-if="indexsd===2"></image>
			</view>
		</view>
		<view class='tn-tabbar-height'></view>
		<!-- <view class="tn-flex tn-footerfixed">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="fabuba()">
				<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="60%" shadow fontBold>

					<text class="tn-color-black">立 即 创 建</text>

				</tn-button>
			</view>
		</view> -->
		<view class="creatd-box"  @click="fabuba()">
			<text class="creatd-box-title">创建房间</text>
		</view>
		<tn-modal width="80%" v-model="is_fatie" backgroundColor="#E4E9EC" padding="30rpx 80rpx" :radius="25" title="提醒"
			content='创建房间需要实名认证' :button="button" :showCloseBtn="false" :maskCloseable="false" :zoom="true"
			:custom="false" @click="clickBtn_shenqing">

		</tn-modal>

	</view>
</template>

<script>
	import {
		host
	} from '@/siteinfo.js'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateCreate',
		mixins: [template_page_mixin],
		data() {
			return {
				button: [{
						text: '取消',
						backgroundColor: '#c1c1c1',
						fontColor: '#000000'
					},
					{
						text: '去认证',
						backgroundColor: '#ffff00',
						fontColor: '#000000'
					}
				],
				is_fatie: false,
				leixingcudin: 0,
				title: '',
				detail: '',
				images: '',
				banner: '',
				tagList: [],
				action: '',
				formData: {
					apiType: 'this,ali',
					token: uni.getStorageSync('token'),
					image: null
				},
				fileList: [],
				showUploadList: true,
				customBtn: false,
				autoUpload: false,
				showProgress: false,
				deleteable: true,
				customStyle: false,
				maxCount: 1,
				disabled: false,
				currentColorIndex: 0,
				colorList: [],
				suijiname: [
					'一起来吐槽星座',
					'一起聊艺术，奇怪的知识增加了',
					'游戏开黑小分队',
					'旅游目的地分享大会',
					'认真谈恋爱，非诚勿扰',
					'蹲一个心动的人',
					'互看瞬间，高质量相亲派对',
					'影视杂谈'
				]
			}
		},
		onShow() {
			this.panduan()
		},
		onLoad(option) {
			let that = this
			uni.$off('setLoginBoxFlag');
			uni.$on('setLoginBoxFlag', loginBoxFlag => {
				that.loginBoxFlag = loginBoxFlag;
			});
			this.panduan()
			this.info()
		},
		methods: {
			clickBtn_shenqing(res) {
				if (res == 1) {
					this.navigateToFn({
						url: '/mineMixinPages/set',
						checkLogin: true
					})
				}
				if (res == 0) {
					uni.navigateBack({})
				}
			},
			async panduan() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/api/user/addAuth',
					data: {

					}
				});
				if (result.data.code == 200) {
					if (result.data.data.is_roomrenzheng == 0) {
						this.is_fatie = true
					}


				}

			},


			async info() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/api/index/liaotianbeijing',
					data: {

					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						that.tagList = result.data.data.tagList;
						that.colorList = result.data.data.colorList;
						
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},



			fabuba() {
				this.$common.noMultipleClicks(this.fabu(), 1000);
			},





			suiji() {
				let a = Math.random(); //生成0——1的随机数
				a = a * 8; //0——10的随机数
				a = Math.ceil(a);
				this.title = this.suijiname[a]
			},
			async fabu() {
			
							if (this.title == '') {
								this.msg('请输入名称')
								return
							}
							if (this.detail == '') {
								this.msg('请输入公告')
								return
							}				
							let that = this;			
							
							let result = await that.$request({
								loading: 1,
								method: 'post',
								url: '/api/chatvoc/room_add',
								data: { 
									leixing:0, 
									title:that.title,
									title_sub: that.detail,
									type:that.colorList[that.leixingcudin].title,						
								}
							});
			
							if (result.statusCode == 200) {
								if (result.data.code == 200) {
			
									uni.hideLoading()
								uni.showModal({ 
									title: '提示',
									content: result.data.msg,
									confirmText:'知道了',
									showCancel:false, 
									success: function (res) {
										if (res.confirm) {
											uni.navigateBack()
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
										
									uni.$emit('group_ok', result.data.code)
			
								} else {
									uni.showToast({
										icon: 'none',
										title: result.data.msg
									});
								}
							} else {
								uni.showToast({
									icon: 'none',
									title: that.$errorMsg
								});
							}
			
			
						},
			pickerColorClick(index) {
				if (index === this.currentColorIndex) {
					return
				}
				this.currentColorIndex = index
			},

			pickerColorClickleid(index) {
				if (index === this.leixingcudin) {
					return
				}
				this.leixingcudin = index
			},




		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {
		color: #ffffff;
		background: linear-gradient(0deg, #39308D 0%, #342C67 100%);
		width: 100vw;
		height: 100vh;
		padding-bottom: 200rpx;
	}

	.tn-image-upload__item-preview__delete {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		z-index: 10;
		border: 10px solid;
		width: 0px;
		height: 0px;
		color: rgb(0, 255, 198);
	}

	.tn-image-upload__item-preview__delete--icon {
		position: absolute;
		color: rgb(0, 0, 0);
		font-size: 18px;
		line-height: 1;
	}



	.bg-flex-shadow {
		background-color: #00C3FF;
		z-index: 9999;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	.dk-ban {
		margin: 5px;
		width: 30%;
		border-radius: 0.3125rem;
		background-color: rgba(0, 0, 0, 0.6);
		color: rgba(255, 255, 255, 0.8);
	}

	.dk-bantext {
		color: rgba(255, 255, 255, 0.6);
		background: rgba(216, 216, 216, 0.08);
		border-right: 0.0625rem solid rgba(255, 255, 255, 0.1);
		height: 2rem;
		line-height: 2rem;
		text-align: center;
		cursor: pointer;
		padding: 0px 10px;
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	.tn-shadow-blurddd {
		border: 2px solid #fff420;
	}

	//、输入框
	.amount-input-box {
		position: relative;
		height: 40px;
	}

	.amount-input-currency-bg {
		border-radius: 4px 0 0 4px;
		background: #0d131d;
	}

	.amount-input-currency {
		width: 82px;
		height: 38px;
		position: absolute;
		top: 1px;
		left: 1px;
		z-index: 99;
	}

	.amount-input-currencyyou {
		width: 62px;
		height: 38px;
		position: absolute;
		top: 1px;
		right: 1px;
		z-index: 99;
	}



	.amount-input-box .amount-input-currency-bg .currency-text {
		background: linear-gradient(282deg, #519fff 15.69%, #a25fff);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		width: 82px;
		font-size: 14px;
		position: absolute;
		top: 10px;
		left: 10px;
		text-align: left;
	}

	.input-value {
		flex: 1;
		margin: 0 6rpx;
		height: 30rpx;
		font-size: 20rpx;
		font-weight: 600;
		text-indent: 6px;
		border-radius: 4px;
		transition: 0.5s ease-in-out;
		color: #ffffff;
		background-color: transparent;


	}

	.input-placeholder {
		color: #D8D8D8;
		font-weight: 400;
	}

	//、、、、




	/* 标签内容 end*/
	.name-input-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 678rpx;
		height: 60rpx;
		background: rgba(0, 0, 0, 0.3);
		margin: 20rpx 40rpx;
		padding: 0 20rpx;
		border-radius: 20rpx;
	}

	.name-input-box-left {
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.name-input-box-right {
		display: flex;
		align-items: center;

		.name-input-box-right-img {
			width: 28rpx;
			height: 28rpx;
			margin-right: 12rpx;
		}

		.currency-text {
			font-size: 10px;
			color: #D8D8D8;
		}
	}

	.textarea-boxs {
		display: flex;
		width: 678rpx;
		height: 412rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 20rpx;
		margin: 0 40rpx;
		margin-bottom: 40rpx;
		padding: 20rpx;

		.name-input-box-left {
			width: 120rpx;
		}
	}

	.textarea-content {
		flex: 1;

		v-deep .uni-textarea {
			width: 518rpx;
		}
	}

	.list-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;
	}

	.list-item {
		display: flex;
		flex-direction: column;
		flex: 1;
		// width: 216rpx;
		height: 178rpx;
		padding: 16rpx;
		background: rgba(118, 118, 118, 0.5);
		margin-right: 16rpx;
		border-radius: 20rpx;
		&:last-child{
			margin-right: 0;
		}

		.item-name {
			display: flex;
			justify-content: flex-end;
			p{
			font-size: 28rpx;
			color: #fff;
			}
		}

		.item-img {
			width: 100rpx;
			height: 100rpx;
		} 
	}
 
	.list-item-0 {
		background: linear-gradient(270deg, #FF6CCE 0%, #F9A1BA 100%);
	}

	.list-item-1 {
		background: linear-gradient(180deg, rgba(65, 133, 255, 0.8) 0%, rgba(85, 223, 252, 0.8) 100%);
	}

	.list-item-2 {
		background: linear-gradient(90deg, #7F50FE 0%, #FFAEF8 67%, #D5B7F8 100%);
	}

	.creatd-box {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 80rpx;
		left: 160rpx;
		width: 432rpx;
		height: 100rpx;
		position: fixed;
		border-radius: 411px;
		background: linear-gradient(0deg, #895AFE 0%, #FA87C2 100%);
color: #fff;
		.creatd-box-title {
			font-size: 36rpx;
			font-weight: bold;

			color: #fff;
		}
	}
</style>